{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '滑块验证插件:example/verification/index', '滑块验证'])}
<style>
    .ui-slider-wrap {
        background: #ececec;
        position: relative;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
    .ui-slider-wrap .ui-slider-bg {
        width: 0;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
    .ui-slider-wrap .ui-slider-btn {
        position: absolute;
        top: 0;
        left: 0;
        cursor: move;
        text-align: center;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.125);
        background: #fff;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
    .ui-slider-wrap .ui-slider-btn {
        background: #fff;
    }
    .ui-slider-wrap .ui-slider-btn:before {
        display: inline-block;
        font: normal normal normal 24px/1 "Material Design Icons";
        font-size: inherit;
        text-rendering: auto;
        line-height: inherit;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\f013e";
    }
    .ui-slider-wrap .ui-slider-btn.success:before {
        content: "\f012c";
    }
    .ui-slider-wrap .ui-slider-text {
        width: 100%;
        height: 100%;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        color: #4d5259;
    }
    .ui-slider-wrap .ui-slider-no-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">滑块验证 sliderVerification</div>
        </header>
        <div class="card-body">
        
          <p>原插件名jquery.slider.min.js，为了区分滑块插件，改成jquery.sliderVerification.min.js</p>
        <div id="slider-verification" class="slider"></div>
        <p class="mt-2">验证结果：<span class="resultSpan"></span></p>
        <p><button class="btn btn-default" id="resetBtn">还原</button></p>
        
        </div>
      </div>
  </div>

</div>


<script type="text/javascript">
    $(document).ready(function() {
        $("#slider-verification").slider({
            width: 340,                     // width
            height: 38,                     // height
            sliderBg: "#f9fafb",            // 滑块背景颜色
            color: "#8b95a5",               // 文字颜色
            fontSize: 14,                   // 文字大小
            bgColor: "#15c377",             // 背景颜色
            textMsg: "按住滑块，拖拽验证",     // 提示文字
            successMsg: "验证通过了哦",       // 验证成功提示文字
            successColor: "#fff",           // 滑块验证成功提示文字颜色
            time: 400,                      // 返回时间
            callback: function(result) {    // 回调函数，true(成功),false(失败)
                $(".resultSpan").text(result);
            }
        });
        
        // 还原
        $("#resetBtn").click(function() {
            $("#slider-verification").slider("restore");
        });
    });
    </script>